{% extends "staff/base.html" %}
{% import "_globalhelpers.html" as helpers %}
{% import 'staff/_formhelpers.html' as forms %}

{% block title %} {{ student.identifier }} - {{ current_course.display_name_with_semester }}{% endblock %}

{% block main %}
  <section class="content-header">
      <h1>
        {{ student.email }}
        <small> {{ current_course.display_name }}</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="{{ url_for("admin.course", cid=current_course.id) }}">
            <i class="fa fa-university"></i> {{ current_course.offering }}
        </a></li>
        <li class="active"><a href="{{ url_for('.enrollment', cid=current_course.id) }}">
            <i class="fa fa-list"></i> Enrollment</a>
        </li>
        <li class="active"><a href="#"><i class="fa fa-dashboard"></i> {{ student.email }} </a></li>
      </ol>
  </section>

  <section class="content">
      {% include 'alerts.html' %}
      <div class="row">
        <div class="col-md-12">
          <div class="box box-widget widget-user-2">
            <div class="widget-user-header bg-yellow">
             <div class="widget-user-image">
                <img class="img-circle bg-green">
              </div>

             <!-- /.widget-user-image -->
              <h3 class="widget-user-username">{{ student.identifier }}</h3>
              <h5 class="widget-user-desc"> {{ student.role | capitalize }}</h5>
            </div>
            <div class="box-footer no-padding">
              <ul class="nav nav-stacked">
                {% if enrollment %}

                    {% if enrollment.sid %}
                    <li>
                      <a href="#">Student ID <span class="pull-right badge bg-blue">{{ enrollment.sid }}</span></a>
                    </li>
                    {% endif %}
                    {% if enrollment.class_account %}
                    <li>
                      <a href="#">Course Account <span class="pull-right badge bg-aqua">
                      {{ enrollment.class_account }}
                      </span></a>
                    </li>
                    {% endif %}
                    <li>
                      <a href="#">Role <span class="pull-right badge bg-red">
                      {{ enrollment.role }}
                      </span></a>
                    </li>
                    <li>
                      <a href="#">Enrolled At <span class="pull-right badge bg-green">
                            {{ utils.local_time(enrollment.created, current_course) }}
                      </span></a>
                    </li>
                    <li>
                      <a href="#">Section <span class="pull-right badge bg-purple">
                            {{ enrollment.section}}
                      </span></a>
                    </li>
                {% else %}
                <li>
                  <a href="{{ url_for('.enrollment', cid=current_course.id) }}">
                  Status: <span class="pull-right badge bg-red">
                  Not Enrolled
                  </span></a>
                </li>
                {% endif %}
              </ul>
            </div>
          </div>
          <!-- /.widget-user -->
        </div>
      </div>


      <div class="row">
        <div class="col-md-12">
          {% with assignments=assignments['active'], title='Active' %}
            {% include 'staff/student/assignment.list.html' %}
          {% endwith %}

          {% with assignments=assignments['inactive'], title='Inactive' %}
            {% include 'staff/student/assignment.list.html' %}
          {% endwith %}

          {% with moss_results=moss_results, student=student, show_assignment=True %}
            {% include 'staff/plagiarism/list.student.html' %}
          {% endwith %}
        </div>
      </div>

      <!-- Box -->
      <div class="box">
        <div class="box-header with-border">
            <h3 class="box-title">Edit Participant</h3>
            <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
                    <i class="fa fa-minus"></i>
                </button>
            </div>
        </div>
        <div class="box-body">
            <!-- form goes here -->
            {% call forms.render_form(form, action_url=url_for('.student_view', cid=current_course.id, email=student.email), action_text='Submit',
            class_='form') %}
                {{ forms.render_field(form.name, label_visible=true, placeholder='Name', required="required", type='text', value=(student.name or "")) }}
                {{ forms.render_field(form.email, label_visible=true, required="required", value=student.email, type='email') }}
                {{ forms.render_field(form.sid, label_visible=true, placeholder='1234567', type='text', value=(enrollment.sid or "")) }}
                {{ forms.render_field(form.secondary, label_visible=true, placeholder='cs61a-abc', type='text', value=(enrollment.class_account or "")) }}
                {{ forms.render_field(form.section, label_visible=true, placeholder='', type='text', value=(enrollment.section or "")) }}
                {{ forms.render_field(form.role, label_visible=true) }}
            {% endcall %}
        </div>
        <!-- /.box-body -->
        <!-- /.box-footer-->
    </div>
    <!-- /.box -->

  </section>

  <!-- </body> do not close body in template-->
{% endblock %}

{% block page_js %}

{{ helpers.js_scores('scores', assignments['inactive']) }}
{{ helpers.js_scores('allScores', assignments['active'] + assignments['inactive'], True)}}
{% endblock %}
